<template>
  <div>
    <div style="width: 100%;height: 100px;">
      <a-row :gutter="[16,8]">
        <a-col :span="5"  >
          <a-button-group >
            <a-button @click="whole()">
              全部
            </a-button>
            <a-button @click="classA()">
              甲班
            </a-button>
            <a-button @click="classB()">
              乙班
            </a-button>
            <a-button @click="classC()">
              丙班
            </a-button>
          </a-button-group>
        </a-col>

        <a-col :span="3" >
          <a-input v-model="name" placeholder="请输入姓名" />
        </a-col>
        <a-col :span="3" >
          <a-input v-model="jobId" placeholder="请输入工号" />
        </a-col>
        <a-col :span="3" >
          <a-date-picker v-model="riqi" @change="onChange" />

        </a-col>
        <a-col :span="3" >
          <a-select placeholder="选择车间" v-model="workshop" style="width: 120px" @change="handleChangeA">
            <a-select-option value="一纺">
              一纺
            </a-select-option>
            <a-select-option value="二纺">
              二纺
            </a-select-option>
            <a-select-option value="三纺" >
              三纺
            </a-select-option>
            <a-select-option value="五纺">
              五纺
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="2" >
          <a-button @click="GenerateReport()" type="primary" style="width: 100%">
            生成报表
          </a-button>
        </a-col>
        <a-col :span="3" >
          <!-- <a-button @click="ExportLengthReport()" style="width: 100%">导出长度报表</a-button> -->
        </a-col>
        <a-col :span="2"  >
          <a-button @click="ExportReport()" style="width: 100%">导出报表</a-button>
        </a-col>
      </a-row>

      <a-row :gutter=16 style="margin-top: 10px;">
        <a-col :span="4" >
          <a-select placeholder="选择品种" v-model="variety" style="width: 190px" @change="handleChangeB">
            <a-select-option value="一纺">
              一纺
            </a-select-option>
            <a-select-option value="二纺">
              二纺
            </a-select-option>
            <a-select-option value="三纺" >
              三纺
            </a-select-option>
            <a-select-option value="五纺">
              五纺
            </a-select-option>
          </a-select>
        </a-col>

        <a-col :span="2" style="float: right">
          <a-button @click="search()" type="primary" style="width: 100%">
            搜索
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-table rowKey="id" :columns="columns" :data-source="data" :scroll="{ x: 2600, y: 600 }" :pagination="ipagination">
        <a slot="action" slot-scope="text">action</a>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaoShouTuo",
  data(){
    return{
      name:'',
      jobId:'',
      riqi:null,
      workshop:undefined,
      variety:undefined,
      jobType:'',
      data,
      columns,
	  
    }
  },
  methods: {
    whole(){

    },
    classA(){

    },
    classB(){

    },
    classC(){

    },
    GenerateReport(){

    },
    ExportLengthReport(){

    },
    ExportReport(){

    },
    search(){

    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    handleChangeA(value) {
      console.log(`selected ${value}`);
    },
    handleChangeB(value) {
      console.log(`selected ${value}`);
    },
  }
}

const columns = [
  { title: '车间', width: 100, dataIndex: 'column1', key: 'column1', fixed: 'left' },
  { title: '班次', width: 100, dataIndex: 'column2', key: 'column2', fixed: 'left' },
  { title: '上班时间', width: 100, dataIndex: 'column3', key: 'column3', fixed: 'left'},
  { title: '细纱车间', width: 100, dataIndex: 'column4', key: 'column4', fixed: 'left'},
  { title: '络简车间', width: 100,dataIndex: 'column5', key: 'column5', fixed: 'left'},
  { title: '工号', dataIndex: 'column6', key: 'column6', width: 150 },
  { title: '姓名', dataIndex: 'column7', key: 'column7', width: 150 },
  { title: '工种', dataIndex: 'column8', key: 'column8', width: 150 },
  { title: '品种', dataIndex: 'column9', key: 'column9', width: 150 },
  { title: '起始台位', dataIndex: 'column10', key: 'column10', width: 150 },
  { title: '终止台位', dataIndex: 'column11', key: 'column11', width: 150 },
  { title: '实开台数', dataIndex: 'column12', key: 'column12',width: 150  },
  { title: '数量', dataIndex: 'column13', key: 'column13', width: 150 },
  { title: '单价', dataIndex: 'column14', key: 'column14', width: 150 },
  { title: '工资', dataIndex: 'column15', key: 'column15', width: 150 },
  { title: '其他补贴', dataIndex: 'column16', key: 'column16', width: 150 },
  { title: '工资合计', dataIndex: 'column17', key: 'column17', width: 150 },
  { title: '备注', dataIndex: 'column18', key: 'column18', width: 150 },
];
const data = [
  {
    column1:1,
    column2:1,
    column3:1,
    column4:1,
    column5:1,
    column6:1,
    column7:1,
    column8:1,
    column9:1,
    column10:1,
    column11:1,
    column12:1,
    column13:1,
    column14:1,
    column15:1,
    column16:1,
    column17:1,
    column18:1,

  }
];
</script>

<style scoped>

</style>